<template>
  <div class="data-panel" style="margin-top: -50px;">
    <div class="data-item" @click="downloadXml()" title="下载XML格式数据">
      <div class="data-item-icon bpmn-xml"></div>
    </div>
    <div class="data-item" @click="downloadImage()" title="下载图片格式数据">
      <div class="data-item-icon bpmn-img"></div>
    </div>
    <div class="data-item">
      <input type="file" className="data-upload" @change="uploadXml($event)" title="上传XML格式数据" />
      <div class="data-item-icon bpmn-upload"></div>
    </div>
    <div class="data-item" @click="getGraphRawData()" title="下载JSON格式数据">
      <div class="data-item-icon bpmn-look"></div>
    </div>
  </div>
</template>
<script setup>
import LogicFlow from '@logicflow/core';
const props = defineProps({
  lf: Object,
})
function download(filename, text) {
  var element = document.createElement("a");
  element.setAttribute(
    "href",
    "data:text/plain;charset=utf-8," + encodeURIComponent(text)
  );
  element.setAttribute("download", filename);
  element.style.display = "none";
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

function isJSON(str) {
  if (typeof str == "string") {
    try {
      var obj = JSON.parse(str);
      if (typeof obj == "object" && obj) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      console.log("error：" + str + "!!!" + e);
      return false;
    }
  }
  //console.log("It is not a string!");
}
function downloadXml() {
  const data = props.lf.getGraphData();
  download("logic-flow.xml", data);
}
function downloadImage() {
  props.lf.getSnapshot();
}
</script>
<style>
.data-panel {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 40px;
  width: auto;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}

.data-item {
  margin: 0px 5px;
  display: inline-block;
  position: relative;
}

.data-item-icon {
  width: 20px;
  height: 20px;
  background-size: cover;
}

.data-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.data-upload {
  opacity: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  right: 0;
}

.bpmn-xml {
  background: url() center center no-repeat;
  cursor: grab;
}

.bpmn-img {
  background: url() center center no-repeat;
  cursor: grab;
}

.bpmn-upload {
  background: url() center center no-repeat;
  cursor: grab;
}

.bpmn-look {
  background: url() center center no-repeat;
  cursor: grab;
}
</style>
